<template>
  <div class="login">
    <VanImage
      class="image-header"
      width="10rem"
      height="10rem"
      fit="cover"
      src="https://unpkg.com/@vant/assets/cat.jpeg"
      @click="huitui"
    />

    <Form @submit="onSubmit">
      <cell-group inset>
        <field
          v-model="userName"
          name="userName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </cell-group>
      <div class="login-router-link">
        <p>
          没有账户,<router-link :to="{ name: 'enter' }">请注册</router-link>
        </p>
      </div>
      <div style="margin: 16px">
        <Button round block type="primary" native-type="submit">登录</Button>
      </div>
    </Form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Image as VanImage, Form, Field, CellGroup, Button, Toast } from "vant";
import { setToken } from "../../uitils/Token";
import { loginAPI } from "../../services/auth";
const userName = ref("");
const password = ref("");
const { push } = useRouter();
const onSubmit = (values) => {
  console.log("submit", values);
  loginAPI(values).then((res) => {
    console.log(res);
    //@ts-ignore
    if (res.code === 1) {
      // console.log(11111);
      setToken(res.data);
      Toast.success("登录成功");
      setTimeout(() => {
        push({
          name: "user",
        });
      }, 2000);
    } else {
      Toast.fail(res.data);
    }
  });
};
// 会首页
const huitui = () => {
  push({
    name: "home",
  });
};
</script>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  .image-header {
    display: block;
    margin: 5rem auto;
  }
}
</style>
